<template>
  <ContentWrap :body-style="{ padding: 0 }" class="border-none!">
    <el-row class="w-100% mx-0!" :gutter="10">
      <el-col :xs="3" :sm="3" :md="3" :lg="6" :xl="3">
        <div class="flex justify-center">
          <el-image :fit="'fill'" :src="spuItem.picUrl || defaultProductImg" />
        </div>
      </el-col>
      <el-col :xs="17" :sm="17" :md="17" :lg="13" :xl="17">
        <div class="flex flex-col justify-between !h-full">
          <div class="min-h-32px flex items-center">
            <el-text line-clamp="1" class="custom-text-16 c-[#11192d]! .dark:c-[#fff]!">
              <SpuTag :type="DICT_TYPE.PRODUCT_SPU_TYPE" :value="spuItem.spuType" />
              {{ spuItem.spuName }}
            </el-text>
          </div>

          <div class="custom-text-14 min-h-32px flex m-t-10px items-center">
            <el-text> ID: {{ spuItem.skuId }}</el-text>
            <el-divider direction="vertical" />
            <el-text>
              {{ spuItem.skuSerialName }}
            </el-text>
            <el-divider direction="vertical" />
            <el-text> 订单号: {{ spuItem.no }} </el-text>
            <el-button @click.stop="copyContent(spuItem.no)" text>
              <Icon icon="ep:copy-document" :size="14" class="color-[var(--el-color-primary)]" />
            </el-button>
          </div>

          <div class="flex min-h-32px items-center">
            <slot name="extInfo"></slot>
          </div>
        </div>
      </el-col>
      <el-col :xs="4" :sm="4" :md="4" :lg="5" :xl="4">
        <div>
          <slot name="itemButton"></slot>
        </div>
      </el-col>
    </el-row>
  </ContentWrap>
</template>
<script setup lang="ts" name="spuItem">
import { onMounted } from 'vue'
import { propTypes } from '@/utils/propTypes'
import { DICT_TYPE } from '@/utils/dict'

import defaultProductImg from '@/assets/imgs/default-product-img.jpg' //默认商品图

defineProps({
  // 选中的门店列表
  spuItem: propTypes.object.def({})
})

/** 复制 **/
import { useClipboard } from '@vueuse/core'
const { copy } = useClipboard() // 初始化 copy 到粘贴板
const copyContent = async (content) => {
  await copy(content)
  message.success('复制成功！')
}

const message = useMessage() // 消息弹窗

onMounted(() => {})
</script>
<style lang="scss" scoped>
:deep(.el-image) {
  border-radius: 2px;
  width: 100%;
  height: 0;
  padding-bottom: 100%;
}
:deep(.el-image__inner) {
  position: absolute !important;
}
</style>
